<template>
  <view class="bind-container">
    <view class="cell-group">
      <view class="cell">
        <view class="label name">手机号</view>
        <view class="value">
          <input class="input" v-model.trim="payload.phone" type="tel" placeholder="请输入手机号">
        </view>
      </view>
      <view class="cell">
        <view class="label name">验证码</view>
        <view class="value">
          <input class="input" v-model.trim="payload.code" placeholder="请输入验证码">
        </view>
        <view class="get-code-btn" @click="countDown">
          {{ time === 0 ? '获取验证码' : '重新获取(' + time + ')' }}
        </view>
      </view>
    </view>
    
    <view class="submit-btn" @click="handleSubmit">提交</view>
  </view>
</template>

<script>
  const { sendSmsApi, bindPhoneApi } = require('@/api/index')
  
  export default {
    data() {
      return {
        payload: {
          phone: '',
          code: ''
        },
        time: 0,
        timer: null,
      };
    },
    methods: {
      countDown() {
        if (this.time === 0) {
          if (this.payload.phone === '') {
            uni.showToast({
              icon: 'none',
              title: '请输入手机号'
            })
            return
          }
          if (this.payload.phone.length != 11) {
            uni.showToast({
              icon: 'none',
              title: '请输入正确的手机号'
            })
            return
          }
          sendSmsApi({
            phone: this.payload.phone
          }).then(res => {
            uni.showToast({
              icon: 'none',
              title: '验证码发送成功'
            })
            this.time = 60
            this.loop()
          })
        }
      },
      loop() {
        if (this.time > 0) {
          this.timer = setTimeout(() => {
            this.time -= 1
            this.loop()
          }, 1000)
        } else {
          clearTimeout(this.timer)
          this.timer = null
        }
      },
      handleSubmit() {
        if (this.payload.phone === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号'
          })
          return
        }
        if (this.payload.phone.length !== 11) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的手机号'
          })
          return
        }
        if (this.payload.code === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入验证码'
          })
          return
        }
        console.log('payload === ', this.payload)
        bindPhoneApi({
          ...this.payload,
          open_id: uni.getStorageSync('open_id')
        }).then((res) => {
          uni.setStorageSync('token', res.token)
          uni.reLaunch({
            url: '/pages/index/index'
          })
        })
      }
    }
  }
</script>

<style lang="scss">
.bind-container {
  .cell-group {
    background-color: #fff;
    margin: 32rpx 0;
    padding: 0 32rpx;
    box-sizing: border-box;
    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 88rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 28rpx;
      &:last-child {
        border-bottom: none;
      }
      .label {
        color: #666;
        overflow: hidden;
        &.name {
          width: 180rpx;
          & + .value {
            flex: 1;
            overflow: hidden;
            .input {
              height: 88rpx;
              line-height: 88rpx;
              font-size: 28rpx;
              color: #333;
              display: block;
              width: 100%;
            }
          }
        }
      }
      .value {
        overflow: hidden;
        color: #333;
      }
      .get-code-btn {
        font-size: 28rpx;
        color: $uni-color-primary;
        margin-left: 24rpx;
      }
    }
  }
  .submit-btn {
    margin: 32rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    background-color: $uni-color-primary;
    color: #fff;
    text-align: center;
    border-radius: 4px;
  }
}
</style>
